<template>
  <el-form :model="form" label-width="120px" status-icon
    :rules="rules">

    <el-form-item prop="img" label="请输入图片地址">
      <el-input v-model="form.img" 
    
      />
    </el-form-item>
    <el-form-item label="图片提示" prop="alt">
      <el-input v-model="form.alt" />
    </el-form-item>
    <el-form-item label="图片链接" prop="link">
      <el-input v-model="form.link" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">添加</el-button>
    </el-form-item>
    
   
   
  </el-form>
</template>

<script setup lang="ts">
import service from '../../../utlis/service';
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import "element-plus/es/components/notification/style/css"

const form = reactive({
 img:'',
 alt:"",
 link:"",

  
})

const validateImg = (rule:any, value:any, callback:any) => {
  if (value === "") {
    callback(new Error("图片地址不能为空"));
  }
    else if ( /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/.test( value ) == false ) {
    callback(new Error('请输入正确的图片地址'))
  } else {
    callback()
  }
}
const validateAlt = (rule:any, value:any, callback:any) => {
  if (value === "") {
    callback(new Error("图片提示不能为空"));
  }

 else if ( /^(?=.*[a-zA-Z])(?=.*\d).+$/.test( value ) == false ) {
    callback(new Error('请输入符合要求的图片提示,数字和字母组合'))
  } else {
    callback()
  }
}
const validatelink = (rule:any, value:any, callback:any) => {
  if (value === "") {
    callback(new Error("链接不能为空"));
  }
 
  else if (/^[A-Za-z0-9]+$/.test( value ) == false ) {
    callback(new Error('请输入符合要求的链接,'))
  } else {
    callback()
  }
}
//表单验证规则
const rules = reactive({
  img: [{ validator: validateImg,trigger: 'blur' }],
  alt: [{ validator: validateAlt, trigger: 'blur' }],
  link: [{ validator:validatelink , trigger: 'blur' }]

})




const onSubmit = () => {
  service({
    url:"/banner/add",
    method:"post",
    data:form
  }).then(res=>{
    if(res.data.code==="200"){
      ElMessage('正在查询中')
     
    }
  })
 
}

</script>

<style>

</style>